import styled from "styled-components";

export const SelectBox = styled.div`
    position: relative;
    .input_box{
        position: relative;
        input{
            width: 27.2rem;
            height: 3.6rem;
            caret-color: transparent;
            cursor: pointer;
            background: #053561;
            border: .1rem solid #1B6DA1;
            padding-right: 3.6rem;
            color: #E4F2FF;
            font-size: 1.4rem;
        }
        input:focus{
            outline: none; /* 去除默认的焦点样式 */
        }
        input:focus, input:active {
            border-color: #1677ff; /* 例如，将边框颜色改为红色 */
        }
        .input_right{
            position: absolute;
            right: 0;
            top: 0;
            width: 3.6rem;
            height: 3.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2398E2;
        }
    }
    .select_list_ul{
        min-width: 24rem;
        max-height: 20rem;
        background: #093142;
        border-radius: 2px;
        border: 1px solid #3CC6BE;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 0; /* 滚动条宽度 */
        }
    }

 

`;
export const    SelectListUl = styled.ul<{
    $show: string;
}>`
        position: absolute;
        left: 0;
        top: 3.6rem;
        display: ${({ $show }) => $show === 'true' ? 'block' : 'none'};
        background-color: #0867A5;
        min-width: 27.2rem;
        max-height: 20rem;
        overflow-y: auto;
        z-index: 1000;
`;
export const SelectListLi = styled.li`
    height: 3.6rem;
    line-height: 3.6rem;
    padding: 0 1.6rem;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    &:hover{
        background: #2398E2;
    }
`;